<template>
  <div class="echarts" ref="statisticsChart1" style="width: 710px;height: 450px"></div>
</template>

<script>
import {getCurrentInstance,onMounted} from "vue";

export default {
  name: "statistics_chart1",
  setup(){
    const { proxy } = getCurrentInstance();
    const option = {
      title: {
        text: '',
        subtext: '',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },

      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 35487, name: 'UTR3',color: '#c23531' },
            { value: 8621, name: 'UTR5' },
            { value: 23803, name: 'downstream' },
            { value: 52178, name: 'exonic' },
            { value: 26, name: 'UTR5;UTR3' },
            { value: 1568741, name: 'intergenic' },
            { value: 1115450, name: 'intronic' },
            { value: 17653, name: 'ncRNA_exonic' },
            { value: 76, name: 'ncRNA_splicing' },
            { value: 1, name: 'ncRNA_exonic;splicing' },
            { value: 183617, name: 'ncRNA_intronic' },
            { value: 799, name: 'splicing' },
            { value: 28665, name: 'upstream'},
            { value: 1269, name: 'upstream;downstream' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    onMounted(()=>{
      const myeChart = proxy.$echarts.init(proxy.$refs.statisticsChart1)
      myeChart.setOption(option)
    })

  }

}
</script>

<style scoped>

</style>
